@class-prefix-loading: ~'gd-loading';

.@{class-prefix-loading}-loader{
    @keyframes animate {
        17% {
          border-bottom-right-radius: 10%;
        }
        25% {
          transform: translateY(10%) rotate(22.5deg);
        }
        50% {
          transform: translateY(20%) scale(1, 0.9) rotate(45deg);
          border-bottom-right-radius: 80%;
        }
        75% {
          transform: translateY(10%) rotate(67.5deg);
        }
        100% {
          transform: translateY(0) rotate(90deg);
        }
    }
}

.@{class-prefix-loading}-box{
  --color: var(--gd-loading-color,#12aaa2);
  
  background: var(--color);
  animation: animate 0.75s linear infinite;
}

.@{class-prefix-loading}-shadow{
    background: #000;
    opacity: 0.1;
    border-radius: 50%;
    animation: shadow 0.75s linear infinite;
    margin-top: 10px;
}

@keyframes shadow {
    50% {
      transform: scale(1.2, 1);
    }
  }